<template>
  <el-form class="demo-ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm">
    <h3 class="header-h3">饿了么登录页面</h3>
    <el-form-item prop="adminName">
      <el-input type="text" v-model="ruleForm.adminName" placeholder="请输入管理员账号"></el-input>
    </el-form-item>
    <el-form-item prop="passWord">
      <el-input type="password" v-model="ruleForm.passWord" placeholder="请输入管理员密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        :loading="$store.state.loading"
        style="width:100%"
        @click="submitForm('ruleForm')"
      >提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      rules: {
        adminName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        passWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
        ]
      },
      ruleForm: {
        adminName: "",
        passWord: ""
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store.dispatch("login", this);
        } else {
          alert("账号或密码格式不正确");
        }
      });
    }
  }
};
</script>


<style lang="scss">
.demo-ruleForm {
  border: 1px solid #eaeaea;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 0px 1px rgb(115, 171, 207);
  margin: 50px auto;
  width: 400px;
}
.header-h3 {
  text-align: center;
}
</style>